<!--  -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="审核状态">
                <el-select v-model="formInline.status" placeholder="选择审核状态" @change="changeDateSelect">
                    <el-option label="不通过" value="3"></el-option>
                    <el-option label="通过" value="1"></el-option>
                    <el-option label="未审核" value="2"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="时间">
                <el-date-picker v-model="pickerDateArr" type="date" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDatePicker"></el-date-picker>
            </el-form-item> -->
            <el-form-item label="时间">
                <el-date-picker v-model="pickerDateArr" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDatePicker"></el-date-picker>
            </el-form-item>
            <el-form-item label="公司名称">
                <el-input v-model="formInline.company_name" placeholder="输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="登录账号">
                <el-input v-model="formInline.account" placeholder="输入账号"></el-input>
            </el-form-item>
            <el-form-item label="所属地区">
                <el-select v-model="formInline.area_status" placeholder="选择所属公司" @change="selectArea">
                    <el-option label="全部" :value="-1"></el-option>
                    <el-option v-for="(item, index) in getOfficesList" :key="item" :label="item"
                        :value="index"></el-option>
                </el-select>
            </el-form-item>

            <CustomDescriptions :data="descriptionsData" :styleBox="{ width: '40%' }"></CustomDescriptions>

        </CustomForm>

        <el-table :data="list" style="width: 100%" height="600" align="center" v-loading="tableLoading">
            <el-table-column prop="area_company" label="所属地区" width="100" align="center">
            </el-table-column>
            <el-table-column prop="id" label="用户ID" align="center" width="80">
            </el-table-column>
            <el-table-column prop="company_name" label="公司名称" width="240" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="username" label="法人姓名" align="center">
            </el-table-column>
            <!-- <el-table-column prop="phone" label="手机号" align="center">
            </el-table-column> -->
            <el-table-column prop="zh" label="登陆账号" align="center">
            </el-table-column>
            <el-table-column prop="oil" label="油卡比例" align="center" width="80">
            </el-table-column>
            <el-table-column prop="service" label="服务费" align="center" width="80">
            </el-table-column>
            <el-table-column prop="tax" label="运费税率" align="center" width="80">
                <template slot-scope="scope">
                    <span v-if="scope.row.tax == 0">--</span>
                    <span v-else>{{ scope.row.tax }}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="审核状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 4" style="color:red">未审核</span>
                    <span v-else-if="scope.row.status == 1" style="color: green;">通过</span>
                    <span v-else-if="scope.row.status == 2" style="color: red;">未通过</span>
                </template>
            </el-table-column>
            <el-table-column prop="add_time" label="推送时间" align="center">
            </el-table-column>
            <el-table-column prop="address" label="操作" align="center" width="260">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary"
                        @click="dialogVisibleAuditing = true; getHapproveDetail(scope.row.id)"
                        v-if="scope.row.status == 4">审核</el-button>
                    <el-button size="mini" type="primary"
                        @click="dialogVisibleAuditing = true; getHapproveDetail(scope.row.id, true)"
                        v-if="scope.row.status != 4">查看</el-button>
                    <el-button size="mini" type="primary"
                        @click="phoneForm = scope.row; dialogPhone = true">手机号</el-button>
                    <el-button type="primary" size="mini" @click="reset(scope.row)">设置</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
            :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>


        <el-dialog title="审核货主信息" top="5vh" :visible.sync="dialogVisibleAuditing" width="70%"
            :before-close="handleClose">
            <AuditingDialog v-if="dialogVisibleAuditing" :form="auditingForm" @reject="dialogRejectHandler"
                @save="auditingSave" :readonly="dialogReadonly" @showSave="showSave">
            </AuditingDialog>
        </el-dialog>

        <el-dialog title="修改货主手机与登录账号" :visible.sync="dialogPhone" width="40%">
            <el-alert title="修改前请先确定该账号没有正在进行中的业务！！！" type="error" :closable="false"></el-alert>
            <el-form ref="form" :model="phoneForm" label-width="120px">
                <el-form-item label="公司名称">
                    <el-input v-model="phoneForm.company_name"></el-input>
                </el-form-item>
                <el-form-item label="货主手机号">
                    <el-input v-model="phoneForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="货主账号">
                    <el-input v-model="phoneForm.zh"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogPhone = false">取 消</el-button>
                <el-button type="primary" @click="dialogPhone = false">保 存</el-button>
            </span>
        </el-dialog>


        <el-dialog title="请选择拒绝原因" :visible.sync="dialogReject" width="30%">
            <el-form ref="form" :model="formReject" label-width="120px">
                <el-form-item label="身份证人像页">
                    <el-select v-model="formReject.idFront" placeholder="选择错误类型">
                        <el-option label="照片模糊不清晰" value="照片模糊不清晰"></el-option>
                        <el-option label="照片未漏出四个边,不完整" value="照片未漏出四个边,不完整"></el-option>
                        <el-option label="照片反光,不能正常使用" value="照片反光,不能正常使用"></el-option>
                        <el-option label="证件未按名称要求上传" value="证件未按名称要求上传"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证国徽页">
                    <el-select v-model="formReject.idBack" placeholder="选择错误类型">
                        <el-option label="照片模糊不清晰" value="照片模糊不清晰"></el-option>
                        <el-option label="照片未漏出四个边,不完整" value="照片未漏出四个边,不完整"></el-option>
                        <el-option label="照片反光,不能正常使用" value="照片反光,不能正常使用"></el-option>
                        <el-option label="证件未按名称要求上传" value="证件未按名称要求上传"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="营业执照">
                    <el-select v-model="formReject.driverFront" placeholder="选择错误类型">
                        <el-option label="照片模糊不清晰" value="照片模糊不清晰"></el-option>
                        <el-option label="照片未漏出四个边,不完整" value="照片未漏出四个边,不完整"></el-option>
                        <el-option label="照片反光,不能正常使用" value="照片反光,不能正常使用"></el-option>
                        <el-option label="证件未按名称要求上传" value="证件未按名称要求上传"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogReject = false">取 消</el-button>
                <el-button type="primary" @click="rejectHandler">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog class="carTrace" title="设置货主事项" top="5vh" :visible.sync="dialogSet" width="50%" :modal="true">
            <el-form ref="form" :model="setShipperform" label-width="80px" class="set-form">
                <el-form-item label="运费税率">
                    <el-input-number v-model="setShipperform.tax" controls-position="right" :min="0"></el-input-number>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="sureSet">确认设置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getHapproveList, getHapproveDetail, reviewShipper, saveHapprove, setTax } from '@/api/shipper';
import AuditingDialog from './components/auditingDialog.vue'
import { getOfficesList } from '@/utils/tool'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        AuditingDialog
    },
    data() {
        //这里存放数据
        return {
            getOfficesList: getOfficesList(),
            list: [],
            total: 0,
            formInline: {
                status: "",
                time: "",
                company_name: "",
                area_status: 0,
                account: "",
            },
            page: 1,
            pageSize: 10,
            labelStyle: { "text-align": "center", "font-weight": "bold" },
            contentStyle: {
                color: "#444",
                "font-weight": "bold",
                "min-width": "200px"
            },
            pickerDateArr: null,
            tableLoading: false,

            dialogVisibleAuditing: false,//审核dialog框显示
            dialogPhone: false,//修改手机号dialog框显示
            auditingForm: {
                zj_type: "",
                zz_type: "",
                id_pic: "",
                id_pic2: "",
                license_pic: "",
            },

            costForm: {

            },
            phoneForm: {

            },
            dialogReject: false,
            rejectId: '',
            formReject: {
                idFront: "",
                idBack: "",
                driverFront: "",
            },
            descriptionsData: [
                {
                    label: "总认证人数",
                    count: 0,
                    unit: "(人)"
                }
            ],
            dialogReadonly: false,//false表示审核,true表示auditingDialog子组件是保存的状态

            dialogSet: false,//设置货主事项的dialog框

            setShipperform: {
                tax: 0,
                id: 0,
            },
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async auditingSave(data) {
            let { id, zj_type, zz_type, is_test, shxydm, company_name, username, phone, area, bank_name, bank, } = data;
            let res = await reviewShipper({
                id, zj_type, zz_type, is_test, shxydm, company_name, username, phone, area, bank_name, bank, status: 1
            });
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.dialogVisibleAuditing = false;
                this.page = 1;
                this.getHapproveList();
            }
        },
        async getHapproveList() {
            this.tableLoading = true;
            let res = await getHapproveList({
                ...this.formInline,
                page: this.page,
                pageSize: this.pageSize
            });
            if (res.code == 200) {
                this.total = res.data.count;
                this.descriptionsData[0].count = res.data.count;
                this.list = res.data.list;
            }
            this.tableLoading = false;
        },
        async getHapproveDetail(id, readonly = false) {
            if (readonly) {
                this.dialogReadonly = true;
            } else {
                this.dialogReadonly = false;
            }
            let res = await getHapproveDetail({
                id
            });
            if (res.code == 200) {
                console.log(res.data, '21312313213');
                this.auditingForm = res.data;
            } else {
                this.$message.error(res.msg)
            }

        },
        onSubmit(data) {
            this.page = 1;
            this.getHapproveList();
        },
        changeDateSelect(selectData) {
            this.formInline.status = selectData;
            this.page = 1;
            this.getHapproveList();
        },
        changeDatePicker(data) {
            if (data) {
                this.formInline.time = data.join(' - ');
            } else {
                this.formInline.time = "";
            }
            this.page = 1;
            this.getHapproveList();
        },
        resetTable() {
            this.formInline = {
                status: "",
                time: "",
                company_name: "",
                area_status: 0,
            };
            this.pickerDateArr = null;
            this.page = 1;
            this.pageSize = 10;
            this.getHapproveList();
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.page = 1;
            this.getHapproveList();
        },
        handleCurrentChange(page) {
            this.page = page;
            this.getHapproveList();
        },
        handleClose() {
            this.dialogVisibleAuditing = false;
        },
        dialogRejectHandler(id) {
            this.dialogReject = true;
            this.rejectId = id;

        },
        async rejectHandler() {
            if (!this.formReject.driverFront && !this.formReject.idBack && !this.formReject.idFront) {
                this.$message.error('请至少选择一项原因');
                return;
            }
            let res = await reviewShipper({
                id: this.rejectId,
                ...this.formReject,
                status: 2
            })
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.dialogReject = false;
                this.dialogVisibleAuditing = false;
                this.resetTable();
                this.getHapproveList();
            }
        },
        selectArea() {
            this.getHapproveList();
        },
        async showSave(form) {//子组件保存的回调
            console.log(form);
            let res = await saveHapprove(form);
            if (res.code == 200) {
                this.dialogVisibleAuditing = false;
                this.getHapproveList();
                this.$message.success(res.msg)
            } else {
                this.$message.error(res.msg)
                this.dialogVisibleAuditing = false;
            }
        },

        reset(row) {
            this.dialogSet = true;
            this.setShipperform.id = row.id;
            this.setShipperform.tax = row.tax;
        },
        async sureSet() {
            let res = await setTax(this.setShipperform);
            if (res.code == 200) {
                this.$message.success(res.msg)
            } else {
                this.$message.error(res.msg)
            }
            this.dialogSet = false;
            this.getHapproveList();
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getHapproveList();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.row-info {
    width: 30%;
}

::v-deep .el-pagination {
    margin-top: 20px;
}

::v-deep .el-alert {
    margin: 0 0 20px 0;
}

.set-form {
    margin: 50px 30% 50px 30%;

    ::v-deep .el-input-number__increase {
        display: none;
    }

    ::v-deep .el-input-number__decrease {
        display: none;
    }

    ::v-deep .el-input-number {
        width: 100%;

        .el-input__inner {
            text-align: left;
        }
    }
}
</style>